<template>
	<view class="main">
		<u-sticky>
			<u-notice-bar text="【合利宝】渠道通知：商户在节假日结算时，会额外扣除万分之二结算手续费" color="#0e0f08" bgColor="rgba(255, 255, 255, 1)">
			</u-notice-bar>
			<u-popup :show="showPopup" mode="top" :safeAreaInsetBottom="false">
				<view class="modal">
					<view class="merchant-no">
						<view @click="startTimeShow = true" class="btn-cls">
							<text>开始时间</text>
							<view class="btn-cls-left">
								<text style="margin-right: 10px;">{{params.payDateStart}}</text>
								<u-icon name="arrow-right" size="16" />
							</view>
						</view>
						<view @click="endTimeShow = true" class="btn-cls">
							<text>结束时间</text>
							<view class="btn-cls-left">
								<text style="margin-right: 10px;">{{params.payDateEnd}}</text>
								<u-icon name="arrow-right" size="16" />
							</view>
						</view>
						<view @click="showMerchant = true" class="btn-cls">
							<text>商户号</text>
							<view class="btn-cls-left">
								<text style="margin-right: 10px;">{{merchantId}}</text>
								<u-icon name="arrow-right" size="16" />
							</view>
						</view>
						<view @click="showCompany = true" class="btn-cls">
							<text>支付公司</text>
							<view class="btn-cls-left">
								<text style="margin-right: 10px;">{{payCompany}}</text>
								<u-icon name="arrow-right" size="16" />
							</view>
						</view>
						<view @click="payStateShow = true" class="btn-cls">
							<text>结算情况</text>
							<view class="btn-cls-left">
								<text style="margin-right: 10px;">{{payStatus}}</text>
								<u-icon name="arrow-right" size="16" />
							</view>
						</view>
					</view>
					<view class="screenBtn">
						<u-button @click="open()">关闭筛选
							<view class="u-m-r-10"></view>
							<u-icon name="arrow-up" />
						</u-button>
					</view>
				</view>
			</u-popup>
			<u-button @click="open()">点击筛选
				<view class="u-m-r-10"></view>
				<u-icon name="arrow-down" />
			</u-button>
		</u-sticky>
		<view class="content">
			<view>
				<view slot="body" class="card" v-for="(item,index) in stmtResultList" :key="index">
					<view class="">
						<view class="first u-flex u-row-between u-p-b-20 u-border-bottom">
							<view class="first">
								<u-icon name="account" color="#6072FF" size="28"></u-icon>
								<text class="u-p-l-10 u-p-r-10">商户{{item.merchantId}}</text>
							</view>
							<view class="">
								<u-tag v-if="item.payStatus == 0" text="未打款" shape="circle" color="#f37b1d"
									bg-color="#fde6d2" border-color="#fde6d2" />
								<u-tag v-if="item.payStatus == 1" text="打款成功" shape="circle" color="#8dc63f"
									bg-color="#e8f4d9" border-color="#e8f4d9" />
								<u-tag v-if="item.payStatus == 2" text="打款失败" shape="circle" color="#e54d42"
									bg-color="#fadbd9" border-color="#fadbd9" />
								<u-tag v-if="item.payStatus == 3" text="取消打款" shape="circle" color="#f37b1d"
									bg-color="#fde6d2" border-color="#fde6d2" />
							</view>
						</view>
						<view class="second u-flex u-row-between u-p-10">
							<view>结算金额</view>
							<view>{{item.stmtAmt?item.stmtAmt:''}}<text class="u-p-l-10">元</text></view>
						</view>
						<view class="second u-flex u-row-between u-p-10">
							<view>营业金额</view>
							<view>{{item.realTotalAmount?item.realTotalAmount:''}}<text class="u-p-l-10">元</text>
							</view>
						</view>
						<view class="second u-flex u-row-between u-p-10">
							<view>手续费</view>
							<view>{{item.handlingCharge?item.handlingCharge:'0'}}<text class="u-p-l-10">元</text>
							</view>
						</view>
						<view class="second u-flex u-row-between u-p-10">
							<view>银行卡号</view>
							<view>{{item.payeeAstAcctNo?item.payeeAstAcctNo:''}}</view>
						</view>
						<view class="second u-flex u-row-between u-p-10">
							<view>账号名</view>
							<view>{{item.payeeAstAcctName?item.payeeAstAcctName:''}}</view>
						</view>
						<view class="third u-flex u-row-between u-p-10">
							<view>打款日期</view>
							<view>{{item.payDate?item.payDate:''}}</view>
						</view>
						<view class="third u-flex u-row-between u-p-10">
							<view>结算渠道</view>
							<u-tag :text="item.name?item.name:''" plain size="mini"></u-tag>
						</view>
						<view v-if="item.payStatus == 2" class="u-border-top u-p-t-20">
							<view>失败原因：
								<text style="color: red;">{{item.payFailedReason?item.payFailedReason:''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="stmtResultList.length > 0" :status="status" :load-text="loadText"
				style="padding: 30rpx;" />
			<view v-else>
				<u-empty text="暂无结算记录" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
			</view>
			<u-picker :show="showMerchant" @cancel="showMerchant = false" @confirm="showMerchantConfirm($event)"
				:columns="merchantIdList" keyName="label" />

			<u-datetime-picker ref="startTimePicker" :show="startTimeShow" v-model="startTime"
				:default-time="params.payDateStart" @confirm="startConfirm($event)" @cancel="startTimeShow=false"
				mode="date" />
			<u-datetime-picker ref="endTimePicker" :show="endTimeShow" v-model="endTime"
				:default-time="params.payDateEnd" @confirm="endConfirm($event)" @cancel="endTimeShow=false"
				mode="date" />

			<u-picker :show="showCompany" @cancel="showCompany = false" @confirm="showCompanyConfirm($event)"
				:columns="payCompanyList" keyName="label" />
			<u-picker :show="payStateShow" @cancel="payStateShow = false" @confirm="statusConfirm($event)"
				:columns="statusList" keyName="label" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '没有更多了'
				},
				showPopup: false,
				showMerchant: false,
				showCompany: false,
				startTimeShow: false,
				endTimeShow: false,
				payStateShow: false,
				//显示用
				merchantId: '不限',
				payCompany: '不限',
				payStatus: '不限',
				startTime: Number(new Date()),
				endTime: Number(new Date()),
				// 请求设备列表参数
				params: {
					pageNum: 1,
					pageSize: 10,
					merchantId: '',
					payCompany: '',
					payStatus: -1,
					payDateStart: '',
					payDateEnd: '',
				},
				statusList: [
					[{
							value: -1,
							label: '不限'
						},
						{
							value: 0,
							label: '未打款'
						},
						{
							value: 1,
							label: '打款成功'
						},
						{
							value: 2,
							label: '打款失败'
						},
						{
							value: 3,
							label: '取消打款'
						},
					]
				],
				stmtResultList: [],
				merchantIdList: [
					[{
						value: '-1',
						label: '不限'
					}, ]
				],
				payCompanyList: [
					[{
						value: '-1',
						label: '不限'
					}]
				],
			};
		},
		onReady() {
			this.$refs.startTimePicker.setFormatter(this.formatter)
			this.$refs.endTimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			let dateTime = this.$date.addOrMinusDay(new Date(), 14, 'day', '-');
			if (dateTime) {
				this.params.payDateStart = dateTime.dateYMD;
			} else {
				getApp().err("开始时间转换不成功");
			}
			this.params.payDateEnd = this.$date.dateFormatYMD(new Date())
			this.findStmtResultList();
			this.findMerchantIdByQualificationId();
			this.findPayCompanyList();
		},
		onPullDownRefresh() {
			this.initData();
		},
		methods: {
			initData() {
				this.params.pageNum = 1;
				this.stmtResultList = [];
				this.findStmtResultList();
			},
			//显示和隐藏筛选条件
			open() {
				this.showPopup = !this.showPopup
			},
			closeConditionPopup() {
				this.showPopup = false
			},
			showMerchantConfirm(e) {
				this.merchantId = e.value[0].label
				if (this.merchantId == '不限') {
					this.params.merchantId = '';
				} else {
					this.params.merchantId = e.value[0].label
				}
				this.showMerchant = false
				setTimeout(() => {
					this.closeConditionPopup();
				}, 300);
				setTimeout(() => {
					this.initData();
				}, 600);
			},
			findMerchantIdByQualificationId() {

				this.$api('qualification.findMerchantIdByQualificationId').then(res => {
					if (res.status == 0) {
						let list = res.data
						for (let i = 0; i < list.length; i++) {
							let item = {
								label: list[i].merchantId,
								value: i,
							}
							this.merchantIdList[0].push(item)
						}
					} else {
						getApp().err('请求数据不成功：' + res.msg);
					}
				})
			},
			showCompanyConfirm(e) {
				this.payCompany = e.value[0].label
				if (this.payCompany == '不限') {
					this.params.payCompany = '';
				} else {
					this.params.payCompany = e.value[0].label
				}
				this.showCompany = false
				setTimeout(() => {
					this.closeConditionPopup();
				}, 300);
				setTimeout(() => {
					this.initData();
				}, 600);
			},
			findPayCompanyList() {
				this.$api('payCompany.findPayCompanyList').then(res => {
					if (res.status == 0) {
						res.data.forEach(data => {
							let item = {
								label: data.name,
								value: data.id,
								extra: data.code
							}
							this.payCompanyList[0].push(item)
						})
					} else {
						getApp().err('请求数据不成功：' + res.msg);
					}
				})
			},
			//查询方法
			findStmtResultList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('stmtResult.findStmtResult', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.status = res.data.list.length >= 10 ? 'loadmore' : 'nomore';
						this.stmtResultList = [...this.stmtResultList, ...res.data.list]; //合并数组
					} else {
						getApp().err('请求数据不成功：' + res.msg);
					}
				})
			},
			startConfirm(e) {
				this.params.payDateStart = this.$date.dateFormatYMD(e.value)
				this.startTime = this.params.payDateStart
				this.startTimeShow = false
				setTimeout(() => {
					this.closeConditionPopup();
				}, 300);
				setTimeout(() => {
					this.initData();
				}, 600);
			},
			endConfirm(e) {
				this.params.payDateEnd = this.$date.dateFormatYMD(e.value)
				this.endTime = this.params.payDateStart;
				this.endTimeShow = false
				setTimeout(() => {
					this.closeConditionPopup();
				}, 300);
				setTimeout(() => {
					this.initData();
				}, 600);
			},
			//结算
			statusConfirm(e) {
				this.params.payStatus = e.value[0].value;
				this.payStatus = e.value[0].label;
				this.payStateShow = false
				setTimeout(() => {
					this.closeConditionPopup();
				}, 300);
				setTimeout(() => {
					this.initData();
				}, 600);
			},
			//加载更多
			onReachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.params.pageNum++;
				this.findStmtResultList()
			},

			//时间控件格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		font-size: $f-base;
		color: rgba(0, 0, 0, 0.8);

		.btn-cls {
			padding: 25rpx 20rpx;
			display: flex;
			justify-content: space-between;

			.btn-cls-left {
				display: flex;
			}
		}


		.content {
			padding: $u-padding-medium;
			color: rgba(0, 0, 0, 0.7);

			.card {
				background: white;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.first {
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 1);
				}

				.third {
					.grad {
						background: linear-gradient(to top right, #6072FF, #19be6b);
						color: $uni-text-color-inverse;
						border: none;
					}
				}
			}
		}
	}
</style>
